<script setup>
import * as Api from "@req/api";
import { suc, upImgFun } from "@/utils";
import { Modal, message } from "ant-design-vue";
import { ref, onMounted, defineProps, watch, shallowRef, nextTick, defineEmits } from "vue";
import { LoadingOutlined, PlusOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
import EditorCom from "@/components/EditorCom/index.vue";

const fileLoading = ref(false);
const fileListLoading = ref(false);
const fileList = ref([]);
const emit = defineEmits(['close']);
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  editId: {
    type: String,
    default: () => { }
  },
  categorieList: {
    type: Array,
    default: () => []
  }
});
const form = ref({
  name: null,
  desc: null,
  detail: '',
  type: null,
  img: null,
  imgList: [],
});

const queryPd = () => {
  console.log(232322323)
  if (props.editId) {
    Api.queryProduct(props.editId).then((res) => {
      if (suc(res.status)) {
        form.value = res.data;
      }
    })
  }
}

const onClose = (type) => {
  emit('close', { type });
}

const onSubmit = () => {

  const resFun = (res) => {
    if (suc(res.status)) {
      message.success(res.message);
      onClose(true);
    } else {
      message.error("添加失败");
    }
  }
  if (props.editId) {
    Api.editProduct(props.editId, form.value).then((res) => {
      resFun(res)
    });
  } else {
    Api.addProduct(form.value).then((res) => {
      resFun(res)
    });
  }
}


const upFile = async (file) => {
  fileLoading.value = true;
  form.value.img = await upImgFun(file)
  fileLoading.value = false;
}

const upFileList = async (file) => {
  fileListLoading.value = true;
  form.value.imgList.push(await upImgFun(file))
  fileListLoading.value = false;
}

const delImg = (index) => {
  if (index === 'img') {
    form.value.img = null;
  } else {
    form.value.imgList.splice(index, 1);
  }
}

watch(() => props.editId, (val) => {
  if (val) {
    console.log(21312389172389)
    queryPd();
  } else {
    form.value = {
      name: null,
      desc: null,
      detail: '',
      type: null,
      img: null,
      imgList: [],
    }
  }
});

</script>

<template>
  <a-drawer v-model:open="props.open" :title="editId ? '修改产品' : '添加产品'" width="100%" :closable="false"
    :footer-style="{ textAlign: 'right' }" @close="onClose">
    <a-form :model="form" name="basic" class="form" autocomplete="off">
      <a-form-item label="产品名称" name="name" :rules="[{ required: true, message: '请输入产品名称' }]">
        <a-input v-model:value="form.name" :bordered="false" placeholder="请输入产品名称" />
      </a-form-item>
      <a-form-item label="产品描述" name="desc" :rules="[{ required: true, message: '请输入产品描述' }]">
        <!-- <a-input v-model:value="form.desc" :bordered="false" placeholder="请输入产品描述" /> -->
        <EditorCom v-if="props.open" :value="form.desc" height="200px" @changeValue="(val) => { form.desc = val }"></EditorCom>
      </a-form-item>
      <a-form-item label="产品分类" name="type" :rules="[{ required: true, message: '请选择产品分类' }]">
        <a-tree-select v-model:value="form.type" allow-clear :tree-data="props.categorieList" :bordered="false"
          placeholder="请选择产品分类" tree-node-filter-prop="label">
        </a-tree-select>
      </a-form-item>
      <a-form-item label="产品封面" name="img">
        <div class="upload-box">
          <div class="up-img" v-if="form.img">
            <a-image :src="form.img" width="100px" height="100px" alt="main-img" />
            <close-circle-outlined class="close-icon" @click="delImg('img')" />
          </div>
          <a-upload v-else v-model:file-list="fileList" name="avatar" list-type="picture-card" class="avatar-uploader"
            :customRequest="upFile" :show-upload-list="false">
            <div>
              <loading-outlined v-if="fileLoading"></loading-outlined>
              <plus-outlined v-else></plus-outlined>
              <div class="ant-upload-text">Upload</div>
            </div>
          </a-upload>
        </div>
        <span class="tips">tips: 建议图片比例 <span>1</span> : <span>1</span></span>
      </a-form-item>
      <a-form-item label="产品图片列表" name="img">
        <div class="img-list-box">
          <div class="up-img list" v-for="(item, index) in form.imgList">
            <a-image :src="item" width="100px" height="100px" alt="main-img" />
            <close-circle-outlined class="close-icon" @click="delImg(index)" />
          </div>
          <a-upload v-if="form.imgList.length < 5" v-model:file-list="fileList" name="avatar" list-type="picture-card"
            class="avatar-uploader" :customRequest="upFileList" :show-upload-list="false">
            <div>
              <loading-outlined v-if="fileListLoading"></loading-outlined>
              <plus-outlined v-else></plus-outlined>
              <div class="ant-upload-text">Upload</div>
            </div>
          </a-upload>
        </div>
        <span class="tips">tips: 建议图片比例 <span>1</span> : <span>1</span></span>
      </a-form-item>
      <a-form-item label="产品详情" name="detail" style="margin-bottom: 40px">
        <EditorCom v-if="props.open" :value="form.detail" @changeValue="(val) => { form.detail = val }"></EditorCom>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose(false)">Cancel</a-button>
      <a-button type="primary" @click="onSubmit">Submit</a-button>
    </template>
  </a-drawer>
</template>

<style lang="postcss" scoped>
.form {
  height: 100%;
  display: flex;
  padding: 30px 30px 0;
  flex-direction: column;

  .img-list-box {
    display: flex;

    &>div {
      margin-right: 20px;
    }
  }

  .btn-group {
    margin-top: auto;
    text-align: right;
  }

  ::v-deep .ant-form-item-label>label {
    justify-content: end;
    width: 100px;
  }

  .upload-box {
    ::v-deep .ant-upload {
      overflow: hidden;
      width: 100px;
      height: 100px;
      box-sizing: border-box;

      &.ant-upload-select {
        width: 100px;
        height: 100px;
        box-sizing: border-box;
      }
    }
  }

  .up-img {
    position: relative;
    width: 100px;
    height: 100px;

    &.list {
      width: 100px;
      height: 100px;
    }

    ::v-deep .ant-image {
      border-radius: 10px;
      overflow: hidden;

      .ant-image-img {
        object-fit: cover;
      }
    }

    .close-icon {
      position: absolute;
      z-index: 1;
      font-size: 25px;
      right: -10px;
      top: -10px;
      cursor: pointer;
    }
  }

}

.tips {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);

  span {
    color: #ff4d4f;
  }
}
</style>